<template>
	<view class="mine-page">
		<view class="user-info flex-column">
			<wd-icon class="setting" name="setting" size="16px" @tap="nav('/pages/setting/setting')"/>
			<image :src="userInfo.avatar" mode="aspectFill" class="avatar" />
			<view class="user-name flex-center">
				<view class="name"> {{ userInfo.name }} </view>
				<!-- <wd-icon name="gender-female" size="22px" color="#5284fd" /> -->
				<!-- <wd-icon name="gender-male" size="22px" color="#f44"></wd-icon> -->
			</view>
		</view>
		<view class="records-box">
			<view class="records-title align-center">
				<view class="title"> 我的订单 </view>
				<wd-icon name="a-chevron-rightdouble" size="20px" color="#999" @tap="nav(`/pages/order/order?type=${userInfo.role_id=='13'?'0':'-1'}`)"/>
			</view>
			<view class="records-list">
				<view class="r-item" v-for="item in orderType" :key="item.icon" @tap="nav('/pages/order/order?type='+item.type)"> 
					<image :src="item.icon" class="r-img"/>
					<view class="r-text"> {{ item.title }} </view>
				</view>
			</view>
		</view>
		<view class="func align-center" v-if="userInfo.role_id != '13'">
			<view class="item justify-center align-center flex-column" @tap="nav('/pages/mine/release')">
				<image src="/static/icon/ck.png" class="img" />
				<view class="txt"> 待出库 </view>
			</view>
			<view class="item justify-center align-center flex-column" @tap="nav('/pages/inventory/inventory')">
				<image src="/static/icon/pd.png" class="img" />
				<view class="txt"> 库存盘点 </view>
			</view>
			<view class="item justify-center align-center flex-column" @tap="nav('/pages/warning/warning')"> 
				<image src="/static/icon/yj.png" class="img" />
				<view class="txt"> 库存预警 </view>
			</view>
			<view class="item justify-center align-center flex-column" @tap="nav('/pages/mine/employee')">
				<image src="/static/icon/yg.png" class="img" />
				<view class="txt"> 员工管理 </view>
			</view>
		</view>
		<view class="tools">
			<!-- <view class="tool" @tap="nav('/pages/about/about')">
				<view class="label"> 关于我们 </view>
				<wd-icon name="arrow-right" size="14px"></wd-icon>
			</view>
			<view class="tool" @tap="nav('/pages/contact/contact')">
				<view class="label"> 客服中心 </view>
				<wd-icon name="arrow-right" size="14px"></wd-icon>
			</view> -->
			<view class="tool" @tap="nav('/pages/feedback/feedback')">
				<view class="label"> 意见反馈 </view>
				<wd-icon name="arrow-right" size="14px"></wd-icon>
			</view>
		</view>
		<view class="logout" @tap="logout"> 退出登录 </view>
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue'
	import { useUserStore } from '@/store'
	const userInfo = computed(() => useUserStore().userInfo)
	const orderType = computed(() => useUserStore().orderType)
	const nav = (url) => {
		uni.navigateTo({ url })
	}
	const logout = () => {
		const { LOGOUT } = useUserStore()
		LOGOUT()
	}
</script>

<style lang="scss" scoped>
	.mine-page {
		padding: 20rpx 24rpx;
		padding-top: calc(var(--status-bar-height) + 20rpx);
		.user-info {
			color: #333;
			/* #ifdef MP-WEIXIN */
			margin-top: 80rpx;
			/* #endif */
			padding-top: 80rpx;
			padding-bottom: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			position: relative;
			gap: 30rpx;
			align-items: center;
			.setting {
				position: absolute;
				top: 20rpx;
				right: 24rpx;
			}
			.avatar {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
			}
			.name {
				font-weight: bold;
				font-size: 30rpx;
			}
		}
		.records-box {
			color: #333;
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: #fff;
			margin: 30rpx 0;
			.records-title {
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				justify-content: space-between;
				border-bottom: 1px solid #f8f8f8;
			}
			.records-list {
				gap: 20rpx;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				.r-item {
					flex: 1;
					text-align: center;
					.r-img {
						width: 60rpx;
						height: 60rpx;
					}
					.r-text {
						color: #999;
						font-size: 24rpx;
					}
				}
			}
		}
		.func {
			gap: 30rpx;
			color: #333;
			margin-bottom: 30rpx;
			padding: 20rpx 24rpx;
			border-radius: 20rpx;
			background-color: #fff;
			.item {
				gap: 10rpx;
				.img {
					width: 70rpx;
					height: 70rpx;
				}
				.txt {
					color: #999;
					font-size: 24rpx;
				}
			}
		}
		.tools {
			color: #333;
			padding: 0 20rpx;
			border-radius: 20rpx;
			background-color: #fff;
			.tool {
				height: 44px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f8f8f8;
				&:nth-last-of-type(1) {
					border-bottom: none;
				}
			}
		}
		.logout {
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 20rpx;
			background-color: #fff;
			margin-top: 30rpx;
		}
	}
</style>
